.<template>
  <div>
    <myheader title="出行指南" rightBtn="主页" @updataInfo="submitRecruit"></myheader>
    <!-- 搜索框 -->
    <van-search
      class="search"
      v-model="cityName"
      show-action
      label="城市名称"
      placeholder="请输入城市名称如:福州"
      @search="onSearch"
    >
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
    </van-search>
    <!-- 天气显示框 -->
    <div class="weather">
      <el-card class="box-card">
        <div v-for="(item,index) in  weatherList" :key="index">
          <van-divider dashed>{{item.province}}{{ item.city }}</van-divider>

          <p>天气：{{ item.weather }}</p>
          <van-divider dashed></van-divider>
          <p>当前温度：{{ item.temp }}℃</p>
          <van-divider dashed></van-divider>
          <p>风向:{{ item.wind }}</p>
          <van-divider dashed></van-divider>
          <p>当前风速:{{ item.wind_scale }}</p>
          <van-divider dashed></van-divider>
          <p>风力:{{ item.wind_speed}}</p>
          <van-divider dashed>空气</van-divider>
          <p>空气质量:{{ item.aqi.air_level}}</p>
          <van-divider dashed></van-divider>
          <p>{{ item.aqi.air_tips}}</p>
          <van-divider dashed></van-divider>

          <div v-for="(items,indexs) in item.index" :key="indexs">
            <van-divider dashed>{{items.name}}</van-divider>
            <p>{{ items.level }}</p>
            <p>{{ items.content }}</p>
          </div>
          <van-divider dashed></van-divider>
          <p>更新时间：{{ item.update_time }}</p>
          <van-divider dashed></van-divider>

          <van-button class="more" type="success" size="small" @click="more">显示更多</van-button>
          <van-collapse v-if="show" v-model="activeName" accordion>
            <van-collapse-item
              :title="value.time"
              :name="ind"
              v-for="(value,ind) in item.hour"
              :key="ind"
            >
              <p>气温：{{value.temp}}</p>
              <p>天气：{{value.wea}}</p>
              <p>风向：{{value.wind}}</p>
              <p>级别：{{value.wind_level}}</p>
            </van-collapse-item>
          </van-collapse>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import myheader from '../../../comon/myheader.vue'
export default {
  components: {
    myheader,
  },
  data() {
    return {
      cityName: '',
      weatherList: [],
      activeName: 0,
      show: false,
    }
  },
  mounted() {
    if (window.localStorage.getItem('cityName')) {
      this.cityName = window.localStorage.getItem('cityName').replace('市', '')
    } else {
      this.cityName = '福州'
    }

    this.getWeather()
    // this.getTime()
  },
  methods: {
    //获取所在地的天气
    async getWeather() {
      const res = await this.$axios.get('https://v2.alapi.cn/api/tianqi', {
        params: {
          city: this.cityName,
          token: this.$path.ALAPI_TOKEN,
        },
      })
      if (res.data.code == 200) {
        this.weatherList = []
        this.weatherList.push(res.data.data)
      }
      console.log(this.weatherList)
      console.log(this.cityName)
    },
    // 获取其他地方天气
    getOtherWeather() {
      this.weatherList = []
      this.getWeather()
    },
    // 输入城市
    onSearch() {
      this.cityName = this.cityName.replace('市', '')
      this.getWeather()
      this.cityName = ''
    },
    submitRecruit() {
      this.$router.push('/home')
    },
    // 跟多
    more() {
      this.show = !this.show
    },
  },
}
</script>

<style scoped>
.weather {
  margin-top: 90px;
}
.search {
  position: fixed;
  top: 46px;
  width: 100vw;
}
p {
  font-size: 14px;
}
.more {
  background-color: #efefef !important;
  border: none !important;
}
</style>